<template>
	<view class="outboundStyle">
		<view class="application_nav">
			<view class="application_text">通用服务</view>
			<view class="services">
				<view @click="servicesBtnOK(item.url)" class="services_flex" v-for="(item, index) in services" :key="index">
					<image :src="item.Image" mode=""></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="application_nav">
			<view class="application_text">项目建设</view>
			<view class="services">
				<view @click="servicesBtnOK(item.url)" class="services_flex" v-for="(item, index) in construction" :key="index">
					<image :src="item.Image" mode=""></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="application_nav">
			<view class="application_text">防汛物资管理</view>
			<view class="services">
				<view @click="servicesBtnOK(item.url)" class="services_flex" v-for="(item, index) in material" :key="index">
					<image :src="item.Image" mode=""></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="application_nav">
			<view class="application_text">河湖长制管理</view>
			<view class="services">
				<view @click="servicesBtnOK(item.url)" class="services_flex" v-for="(item, index) in chiefSystem" :key="index">
					<image :src="item.Image" mode=""></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="application_nav">
			<view class="application_text">工程运行管理</view>
			<view class="services">
				<view @click="servicesBtnOK(item.url)" class="services_flex" v-for="(item, index) in operation" :key="index">
					<image :src="item.Image" mode=""></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="application_nav">
			<view class="application_text">设备管理</view>
			<view class="services">
				<view @click="servicesBtnOK(item.url)" class="services_flex" v-for="(item, index) in equipment" :key="index">
					<image :src="item.Image" mode=""></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view :style="{ height: tabBarHeight + 'rpx' }"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			services: [  //通用服务
				{
					name: '通知公告',
					Image: require('@/static/images/map/services/tzg.png'),
					url: '/mappages/notice/notice'
				},
				{
					name: '通讯录',
					Image: require('@/static/images/map/services/txl.png'),
					url: '/mappages/phone/phone'
				},
				{
					name: '视频监控',
					Image: require('@/static/images/map/services/spjk.png'),
					url: '/mappages/monitoring/monitoring'
				},
				{
					name: '雨水情监测',
					Image: require('@/static/images/map/services/ysq.png'),
					url: '/mappages/situation/situation'
				}
			],
			construction: [ //项目建设
				{
					name: '项目信息',
					Image: require('@/static/images/map/construction/xm.png'),
					url: '/mappages/project/project'
				},
				{
					name: '安全监督',
					Image: require('@/static/images/map/construction/aq.png'),
					url: '/mappages/supervise/supervise'
				},
				{
					name: '执行上报',
					Image: require('@/static/images/map/construction/sb.png'),
					url: '/mappages/reporting/reporting'
				},
				{
					name: '现场管理',
					Image: require('@/static/images/map/construction/xcgl.png'),
					url: '/mappages/management/management'
				},
				{
					name: '监督管理',
					Image: require('@/static/images/map/construction/jdgl.png'),
					url: '/mappages/supervision/supervision'
				},
				{
					name: '我的整改',
					Image: require('@/static/images/map/construction/wdzg.png'),
					url: '/mappages/rectification/rectification'
				}
			],
			material: [ //防汛物质管理
				{
					name: '物资数据',
					Image: require('@/static/images/map/material/sjk.png'),
					url: '/mappages/materials/materials'
				},
				{
					name: '出库记录',
					Image: require('@/static/images/map/material/ck.png'),
					url: '/mappages/outbound/outbound'
				},
				{
					name: '入库记录',
					Image: require('@/static/images/map/material/rk.png'),
					url: '/mappages/warehousing/warehousing'
				},
				{
					name: '盘点记录',
					Image: require('@/static/images/map/material/pd.png'),
					url: '/mappages/Inventory/Inventory'
				}
			],
			chiefSystem: [ //河湖长制管理
				{
					name: '河湖数据',
					Image: require('@/static/images/map/chiefSystem/sj.png'),
					url: '/mappages/lakes/lakes'
				},
				{
					name: '河湖巡查',
					Image: require('@/static/images/map/chiefSystem/xc.png'),
					url: '/mappages/patrol/patrol'
				},
				{
					name: '河湖整改',
					Image: require('@/static/images/map/chiefSystem/sz.png'),
					url: '/mappages/lake/rectification'
				}
			],
			operation: [ //工程运行管理
				{
					name: '日常巡检',
					Image: require('@/static/images/map/operation/xj.png'),
					url: '/mappages/inspec/inspection'
				},
				{
					name: '维修养护填报',
					Image: require('@/static/images/map/operation/wxyh.png'),
					url: '/mappages/repair/repair'
				},
				{
					name: '运行日志',
					Image: require('@/static/images/map/operation/yxrz.png'),
					url: '/mappages/operation/operation'
				},
				{
					name: '风险隐患',
					Image: require('@/static/images/map/operation/fxyh.png'),
					url: '/mappages/dangers/dangers'
				},
				{
					name: '规程预案',
					Image: require('@/static/images/map/operation/ya.png'),
					url: '/mappages/contingency/contingency'
				}
			],
			equipment: [ //设备管理
				{
					name: '工单管理',
					Image: require('@/static/images/map/equipment/gl.png'),
					url: '/mappages/equipment/manage/manage'
				},
				{
					name: '工单任务',
					Image: require('@/static/images/map/equipment/rw.png'),
					url: '/mappages/equipment/task/task'
				},
				{
					name: '两票三制',
					Image: require('@/static/images/map/equipment/sz.png'),
					url: '/mappages/equipment/systems/systems'
				}
			],
			tabBarHeight: ''
		};
	},
	onLoad() {
		const tabBar = document.querySelector('.uni-tabbar');
		this.tabBarHeight = tabBar.offsetHeight;
		console.log(`tabBar 高度为 ${this.tabBarHeight}px`);
	},
	methods: {
		servicesBtnOK(url) {
			setTimeout(() => {
				this.$tab.navigateTo(url);
			}, 200);
		}
	}
};
</script>

<style lang="scss">
.application {
	height: 100vh;
	width: 100%;
}
.application_nav {
	background: #fff;
	margin: 20rpx 0;
	width: 100%;

	.application_text {
		color: #000;
		font-size: 28rpx;
		padding: 30rpx 0 0 30rpx;
		font-weight: 600;
	}
	.services {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 10rpx;
	}

	.services_flex {
		flex: 1 1 25%;
		max-width: 25%;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		transition: background-color 0.3s, transform 0.3s;
	}
	.services_flex:active {
		background-color: rgba(224, 224, 224, 0.5);
		transform: scale(0.7);
	}
	.services view image {
		width: 100rpx;
		height: 100rpx;
	}

	.services view text {
		margin-top: 10rpx;
		font-size: 22rpx;
	}
}
</style>
